{% extends 'base.html' %}

{% block content %}


<!-- 原始页面内容 -->
<div class="container row justify-content-center mt-5">
    <div class="col-lg-8 text-center">
        <h1 class="display-4 mb-4">🔒安全可靠的农产品溯源平台</h1>
        <p class="lead mb-6">保护敏感信息，确保数据传输和存储的安全性</p>

        <div class="row mt-6">
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0 hover-card">
                    <div class="card-body">
                        <i class="fa fa-lock fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">端到端加密</h3>
                        <p class="card-text">采用先进的加密算法，确保只有您能访问自己的数据</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0 hover-card">
                    <div class="card-body">
                        <i class="fa fa-shield fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">安全认证</h3>
                        <p class="card-text">多重身份验证机制，保护您的账户安全</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm border-0 hover-card">
                    <div class="card-body">
                        <i class="fa fa-users fa-3x text-primary mb-3"></i>
                        <h3 class="card-title">用户管理</h3>
                        <p class="card-text">管理员可以全面管理用户权限和访问控制</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4 d-grid gap-2 d-md-flex justify-content-md-center">
            {% if not user.is_authenticated %}
                <a href="{% url 'register' %}" class="btn btn-primary btn-lg me-3">立即注册</a>
                <a href="{% url 'login' %}" class="btn btn-outline-primary btn-lg">登录账户</a>
            {% else %}
                <a href="{% url 'dashboard' %}" class="btn btn-primary btn-lg">进入主页</a>
            {% endif %}
        </div>
    </div>
</div>

<style>
    .hover-card:hover {
        transform: translateY(-5px);
        transition: all 0.2s ease-in-out;
    }

    .alert {
        max-width: 700px;
        margin: 0 auto;
        font-size: 1.1rem;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .alert.alert-info {
        background-color: #d6eaff;
        color: #004085;
        border-color: #9ec7ef;
    }

    .alert.alert-danger {
        background-color: #ffe5e5;
        color: #721c24;
        border-color: #f5c6cb;
    }

    .alert.alert-success {
        background-color: #e2f6e2;
        color: #155724;
        border-color: #c3e6cb;
    }
</style>

{% endblock %}
